<template>
    <div>
        <!-- 用户评论 start -->
        <div class="comment-item" v-for="(comment,index) in comments" :key="comment.commentId">
            <div class="user-img">
                <img :src="`../imgs/users/${comment.userImg}`">
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>用户名称</span>
                    <div class="film-source">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">{{comment.userSource}}</span>
                    </div>
                </div>
                <div class="user-time">{{comment.createTime}}</div>
            </div>
            <div class="user-conent">
               {{comment.userMsg}}
            </div>
        </div>
        <!-- 用户评论 end -->
    </div>
</template>
<script>
    const CommentItem = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        props:{
            filmid:{
                type:String
            }
        },
        data(){
            return{
                comments:[]
            }
        },
        methods:{
            getFilmCommentsById(id){
                $.ajax({
                    url:"http://localhost/filmApi/loadComments.php?filmId="+id,
                    // data:{
                    //     filmId:id
                    // },
                    dataType:"json",
                    success:({result})=>{
                        // console.log(result);
                        this.comments=result;
                    }
                })
            }
        },
        mounted(){
            this.$nextTick(()=>{
                // console.log(this);
                // console.log(this._props);
                // console.log(this._props.filmid);
                // console.log(this.$attrs);
                // console.log(this.$attrs.filmid);
                // console.log(this.$root.filmId);
                // this.getFilmCommentsById(this._props.filmid);
                this.getFilmCommentsById(this.$root.filmId);
            })
        }
    });
</script>